<template>
    <van-sticky>
        <van-nav-bar
            title="消费记录"
            left-text="返回"
            left-arrow
            @click-left="onBack"
        />
    </van-sticky>

    <van-pull-refresh v-model="refreshing" @refresh="OnRefresh">
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="OnLoad"
        >
            <div class="list">
                <div class="item" v-for="item in list">
                    <p>{{ item.content }}</p>
                    <p>金额：{{ item.total }}</p>
                    <p>时间：{{ item.createtime_date }}</p>
                </div>

                <van-back-top :bottom="'80'" />
            </div>
        </van-list>
    </van-pull-refresh>
</template>

<script setup>
const { proxy } = getCurrentInstance();

const business = proxy.$business;

// 存放数据
const list = ref([]);

// 刷新状态
const refreshing = ref(false);
// 懒加载状态
const loading = ref(false);
// 上拉加载状态
const finished = ref(false);
// 当前页
const page = ref(1);
// 数据总条数
const ListCount = ref(0);

const onBack = () => proxy.$router.back();

// 下拉刷新
const OnRefresh = () =>
{
    // 清空查询参数
    finished.value = false;
    page.value = 1;
    list.value = [];
    loading.value = true;

    // 加载数据方法
    setTimeout(OnLoad,1500);
}

// 上拉加载
const OnLoad = async () =>
{
    // 如果等于true说明当前进行下拉刷新
    if(refreshing.value)
    {
        // 结束下拉刷新
        refreshing.value = false;
    }

    // 组装数据
    let params = {
        busid:business.value.id,
        page:page.value
    }

    // 发起请求
    let result = await proxy.$http.post({
        url:'/business/record',
        params
    })

    // 请求发送完毕后，加载状态也就完毕了
    loading.value = false;

    if(result.code === 1)
    {
        // 合并数组
        list.value = list.value.concat(result.data.list);
        ListCount.value = result.data.count;

        // 如果没有更多数据了，就说明已经加载到底了
        if(list.value.length === ListCount.value)
        {
            finished.value = true;

            return false;
        }

        page.value = page.value + 1;
    }else
    {
        finished.value = true;

        proxy.$fail(result.msg);
    }
}
</script>

<style scoped>
.item {
    background: #fff;
    width: 100%;
    font-size: 1em;
    padding: 15px 0;
    border-bottom: 1px solid #eaeaea;
}

.item p{
    padding: 0 15px;
}

.van-pull-refresh{
    min-height: 90vh;
}
</style>
